import { type Role } from "../../../types/system/role";
import { Button, Modal, Space, Switch, Table, TableProps } from "antd";
import PermissionBtn from "@/components/PermissionBtn";
import QueryForm from "./components/QueryForm";
import { ExclamationCircleFilled, PlusOutlined } from "@ant-design/icons";
import { useRoleList } from "./hooks/useRoleList";
import { useRoleOption } from "./hooks/useRoleOption";
import OptionForm from "./components/OptionForm";
import { useNavigate } from "react-router-dom";

export default function Role() {
  const {
    removeRole,
    tableData,
    loading,
    roleStatusChange,
    getRoleList,
    setSearchForm,
  } = useRoleList();
  const { isModalOpen, oldInfo, optionType, close, openOptionDialog } =
    useRoleOption();
  const navigate = useNavigate();
  const goToPermission = (row: Role.Row) => {
    const queryParams = new URLSearchParams({ roleId: row.id, roleName: row.roleName });
    navigate({pathname:"/system/role/permission",  search: `?${queryParams.toString()}`});
  };
  const showConfirm = (row: Role.Row) => {
    Modal.confirm({
      title: "警告",
      icon: <ExclamationCircleFilled />,
      content: `确认删除【${row.roleName}】?`,
      okText: "确认",
      cancelText: "取消",
      okType: "danger",
      onOk() {
        removeRole(row);
      },
    });
  };

  const columns: TableProps<Role.Row>["columns"] = [
    {
      title: "角色名称",
      key: "roleName",
      dataIndex: "roleName",
      ellipsis: true,
      width: 100,
      align: "center",
      fixed: "left",
    },
    {
      title: "key",
      key: "roleKey",
      dataIndex: "roleKey",
      ellipsis: true,
      width: 100,
      align: "center",
    },

    {
      title: "备注",
      key: "remark",
      dataIndex: "remark",
      ellipsis: true,
      width: 180,
      align: "center",
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "status",
      ellipsis: true,
      width: 180,
      align: "center",
      render: (_, row) => (
        <>
          {" "}
          {row.roleKey !== "admin" && (
            <Switch
              checkedChildren="正常"
              unCheckedChildren="停用"
              checked={row.status === "0"}
              onChange={() => roleStatusChange(row)}
            />
          )}
        </>
      ),
    },

    {
      title: "操作",
      key: "action",
      fixed: "right",
      width: 100,
      align: "center",
      render: (_, row) => (
        <>
          {row.roleKey !== "admin" && (
            <Space size={2} wrap>
              <PermissionBtn code="role.edit">
                <Button
                  type="link"
                  onClick={() => {
                    openOptionDialog("edit", row);
                  }}
                >
                  编辑
                </Button>
              </PermissionBtn>
              <PermissionBtn code="role.remove">
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    showConfirm(row);
                  }}
                >
                  删除
                </Button>
              </PermissionBtn>
              {row.roleKey !== "admin" && (
                <PermissionBtn code="role.auth">
                  <Button
                    type="link"
                    onClick={() => {
                      goToPermission(row);
                    }}
                  >
                    分配权限
                  </Button>
                </PermissionBtn>
              )}
            </Space>
          )}
        </>
      ),
    },
  ];
  return (
    <div className="page__wrap--g">
      <div className="form__wrap--g">
        <QueryForm
          onChange={(form: Role.Query) => {
            setSearchForm(form);
          }}
        />
        <PermissionBtn code="role.add">
          <Button
            type="primary"
            icon={<PlusOutlined />}
            size="middle"
            onClick={() => {
              openOptionDialog("add");
            }}
          >
            新增角色
          </Button>
        </PermissionBtn>
      </div>
      <div className="table__wrap--g no-page">
        <Table
          columns={columns}
          dataSource={tableData}
          rowKey="id"
          loading={loading}
          size="small"
          sticky
          bordered
          scroll={{ x: 1300 }}
          pagination={false}
        />
      </div>
      {isModalOpen && (
        <OptionForm
          isModalOpen={isModalOpen}
          optionType={optionType}
          oldInfo={oldInfo}
          close={close}
          change={() => {
            getRoleList();
          }}
        />
      )}
    </div>
  );
}
